<template>
    <div class="main">
        <div class="containerBox">
            <!-- <div class="top">
                <div class="schoolName">
                    <h2>{{ schoolName }}</h2>
                    <p> &nbsp;&nbsp;统一身份认证平台</p>
                </div>
                <div class="img_box">
                    <img src="../../assets/newTeacherImg.png" alt="">
                </div>
            </div> -->

            
            <div class="center" style="padding: 60px 0px;">
                <div class="center_li" v-for="item in list">
                    <!-- 添加判断，item.appName==进出库管理系统,则content显示进出库管理系统的简短介绍，tab_box显示进出库管理系统的tab -->
                    <!-- 添加判断，item.appName==通知消息系统,则content显示通知消息系统的简短介绍，tab_box显示通知消息系统的tab ，点击进入提示暂未开放～-->
                    <!-- 添加判断，item.appName==问卷调查系统,则content显示问卷调查系统的简短介绍，tab_box显示问卷调查系统的tab ，点击进入提示暂��开放～-->
                    <!-- 添加判断，item.appName==考试培训系统,则content显示考试培训系统的简短介绍，tab_box显示考试培训系统的tab ，点击进入提示暂未开放～-->
                    <div class="center_li_left">
                        <img class="center_img" :src="getIconPath(item.icon)" alt="">
                        <div class="titleBox">
                            <p class="title">{{ item.appName }}</p>
                            <p class="content" v-if="item.appName === '进出库管理系统'">医疗物资进出库管理与追踪</p>
                            <p class="content" v-else-if="item.appName === '通知消息系统'">医院通知公告发布与管理</p>
                            <p class="content" v-else-if="item.appName === '问卷调查系统'">在线问卷设计与数据收集</p>
                            <p class="content" v-else-if="item.appName === '考试培训系统'">在线考试与培训课程管理</p>
                            <p class="content" v-else>暂无介绍～</p>
                        </div>
                    </div>
                    <div class="tab_box">
                        <template v-if="item.appName === '进出库管理系统'">
                            <p class="tab">入库</p>
                            <p class="tab">出库</p>
                            <p class="tab">库存</p>
                        </template>
                        <template v-else-if="item.appName === '通知消息系统'">
                            <p class="tab">公告</p>
                            <p class="tab">通知</p>
                            <p class="tab">消息</p>
                        </template>
                        <template v-else-if="item.appName === '问卷调查系统'">
                            <p class="tab">问卷设计</p>
                            <p class="tab">数据分析</p>
                            <p class="tab">调查报告</p>
                        </template>
                        <template v-else-if="item.appName === '考试培训系统'">
                            <p class="tab">考试</p>
                            <p class="tab">培训</p>
                            <p class="tab">课程</p>
                        </template>
                        <template v-else>
                            <p class="tab">～</p>
                            <p class="tab">～</p>
                            <p class="tab">～</p>
                        </template>
                    </div>
                    <button class="goInBtn" @click="goIn(item)">进入</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { httpService } from "@/utils/httpService";
import { API_BASE_NAME } from "../../constants"
import {  ElMessage } from "element-plus";

export default {
    data() {
        return {
            list: [],
            schoolName: API_BASE_NAME,
        }
    },
    components: {
        ElMessage,
    },
    mounted() {
        // this.getListApp()
    },
    methods: {
        getListApp() {
            httpService("/javaApi/getAllApp", "", "get").then((data) => {
                console.log(data);
                this.list = data;
                // this.appTotal = data.length;
            });
        },
        goIn(item) {
            if (item.appName === '通知消息系统' || item.appName === '考试培训系统' || item.appName === '问卷调查系统') {
                ElMessage({
                    message: '该系统暂未开放，敬请期待～',
                    type: 'warning'
                });
                return;
            }
            
            if (item.background) {
                let routeData = this.$router.resolve({
                    path: item.background,
                });
                window.open(routeData.href, "_blank");
            } else {
                let params = new FormData();
                params.append("returnUrl", item.url);
                httpService("/javaApi/doLogin", params, "post").then((data) => {
                    if (data.code == 200) {
                        window.open(data.object, "_blank");
                    } else {
                        ElMessage.error(data.message);
                    }
                });
            }
        },
        getIconPath(icon) {
            if (!icon) return '';
            return icon.replace('https://vip.ideamerry.com/', '');
        }
    },
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

body {
    /* width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative; */
}

.main {
    width: 100vw;
    height: 100%;
    background: url(../../assets/newIndex_bg.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    /* position: absolute; */
    /* z-index: -1; */
}

.containerBox {
    width: 62vw;
    height: 100%;
    margin: 0 auto;
}

.top {
    display: flex;
    /* align-items: center; */
    justify-content: space-evenly;
}

.schoolName {
    padding: 70px 0;
}

.schoolName h2 {
    font-size: min(4vw, 55px);
    background: -webkit-linear-gradient(to right top, #3610ff, #0279FF, #3610ff);
    background: linear-gradient(to right top, #3610ff, #0279FF, #3610ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin: 0 0 40px 0;
    padding: 0;
}

.schoolName p {
    font-size: min(2.8vw, 26px);
    color: #007EFF;
}

.img_box {
    /* width: 200px; */
    width: 20%;
    padding-top: 70px;
    /* background-color: #999 */
}

.img_box img {
    width: 100%;
}

.center {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.center_li {
    width: 30vw;
    /* min-width: 450px; */
    background-color: #fff;
    margin-bottom: 2vw;
    position: relative;
    padding: 45px 0 28px;
    border-radius: 10px
}

.center_li_left {
    display: flex;
    align-items: center;
    margin-left: 44px;
}

.tab_box {
    display: flex;
    margin: 15px 0 0 44px;
}

.tab_box p {
    padding: 4px 15px 6px;
    background-color: #F3F3F3;
    border-radius: 2px;
    margin-right: 10px;
}

.center_img {
    width: 45px;
    margin-right: 15px;
}

.titleBox .title {
    color: #333333;
    font-size: 20px;
    font-weight: bold;
}

.titleBox .content {
    color: #999;
    font-size: 14px;
    margin-top: 5px;
}

.goInBtn {
    position: absolute;
    top: 40%;
    right: 5px;
    transform: translate(-50%);
    background-color: #2D95FF;
    border-radius: 5px;
    width: 100px;
    height: 36px;
    border: none;
    color: #fff;
    font-size: 14px
}

@media only screen and (min-width: 1024px) {
    .center_li {
        min-width: 430px;
    }

}

@media only screen and (max-width: 1024px) {
    .center_li {
        min-width: 400px;
    }

    .center_li_left {
        margin-left: 5%;
    }

    .tab_box {
        display: flex;
        margin: 15px 0 0 5%;
    }

    .goInBtn {
        right: -30px;
    }
}
</style>